var htmlCodes = [
    '<div  >',
    '                <!--操作-->',
    '                <el-card shadow="always">',
    '                    <div slot="header" class="clearfix">',
    '                        <span>操作</span>',
    '                    </div>',
    '                    <div style=" text-align:center">',
    '                        <el-button size="small" type="primary" icon="el-icon-check" @click="saveAttributeSpecial">保存</el-button>',
    '                        <el-button size="small" icon="el-icon-back" @click="goBackAttributeSpecialList">返回</el-button>',
    '                    </div>',
    '                </el-card>',
    '                <!--顶部筛选-->',
    '                <el-card shadow="always">',
    '                    <div slot="header" class="clearfix">',
    '                        <span>主要信息</span>',
    '                    </div>',
    '                    <el-form :inline="true" :model="special" :rules="specialRules"',
    '                             size="small" ref="attributeSpecialForm" label-width="80px" class="demo-form-inline">',
    '                        <el-form-item label="分类" prop="categoryId">',
    '                            <el-select  v-if="isAdd == 0"',
    '                                        v-model="special.categoryId" placeholder="请选择分类" @change="attributeCategoryChange">',
    '                                <el-option',
    '                                        v-for="item in categoryList"',
    '                                        :key="item.categoryId"',
    '                                        :label="item.categoryName"',
    '                                        :value="item.categoryId">',
    '                                </el-option>',
    '                            </el-select>',
    '                            <el-input  v-if="isAdd == 1" v-model="special.categoryName" disabled></el-input>',
    '                        </el-form-item>',
    '                        <el-form-item label="部件" v-if="partsList.length >0 || special.partsId != null " prop="partsId" >',
    '                            <el-select v-if="isAdd == 0"',
    '                                    v-model="special.partsId" placeholder="请选择部件" @change="attributePartsChange">',
    '                                <el-option',
    '                                        v-for="item in partsList"',
    '                                        :key="item.id"',
    '                                        :label="item.partsName"',
    '                                        :value="item.id">',
    '                                </el-option>',
    '                            </el-select>',
    '                            <el-input  v-if="isAdd == 1 && special.partsId!= null" v-model="special.partsName" disabled></el-input>',
    '                        </el-form-item>',
    '                        <el-form-item label="属性" prop="attributeId" >',
    '                            <el-select  v-if="isAdd == 0"',
    '                                        v-model="special.attributeId" placeholder="请选择属性" @change="attributeChange">',
    '                                <el-option',
    '                                        v-for="item in attributeList"',
    '                                        :key="item.attributeId"',
    '                                        :label="item.attributeName"',
    '                                        :value="item.attributeId">',
    '                                </el-option>',
    '                            </el-select>',
    '                            <el-input  v-if="isAdd == 1" v-model="special.attributeName" disabled></el-input>',
    '                        </el-form-item>',
    '                        <el-form-item label="工艺必须" prop="attributeMustChoice">',
    '                            <el-select v-model="special.attributeMustChoice">',
    '                                <el-option label="是" :value="1"></el-option>',
    '                                <el-option label="否" :value="0"></el-option>',
    '                            </el-select>',
    '                        </el-form-item>',
    '                        <el-form-item label="前端显示" prop="attributeDisplay">',
    '                            <el-select v-model="special.attributeDisplay" >',
    '                                <el-option label="是" :value="1"></el-option>',
    '                                <el-option label="否" :value="0"></el-option>',
    '                            </el-select>',
    '                        </el-form-item>',
    '                </el-form>',
    '                </el-card>',
    '                <!--自定义属性部分-->',
    '                <el-card shadow="always" >',
    '                    <div slot="header" class="clearfix">',
    '                        <span>自定义属性</span>',
    '                    </div>',
    '                    <el-form :model="special" ref="attributeSpecialDefineForm" size="small" label-width="100px" class="demo-dynamic">',
    '                        <el-form-item label="是否自定义" required>',
    '                            <el-select v-model="special.attributeIgnoreDefinition" >',
    '                                <el-option label="是" :value="1"></el-option>',
    '                                <el-option label="否" :value="0"></el-option>',
    '                            </el-select>',
    '                            <el-button type="primary" size="mini" icon="el-icon-plus"',
    '                                       @click.prevent="addAttributeDefLength"',
    '                                       v-show="special.attributeIgnoreDefinition==1">新增',
    '                            </el-button>',
    '                        </el-form-item>',
    '                        <el-form-item',
    '                                style="width: 500px"',
    '                                v-if="special.attributeDefinitionLength.length >0 && special.attributeIgnoreDefinition==1"',
    '                                v-for="(attributeDef, index) in special.attributeDefinitionLength"',
    '                                :label="\'自定义参数\' + index"',
    '                                :prop="\'attributeDefinitionLength\'+index"',
    '                                :rules="[',
    '                                      {data: attributeDef, validator:validateAttributeDefLength,trigger: \'change\'}',
    '                                    ]"',
    '                                >',
    '                            <el-row :gutter="20">',
    '                                <el-col :span="9">',
    '                                    <el-input v-model.number="attributeDef[0]" placeholder="最小值"></el-input>',
    '                                </el-col>',
    '                                <el-col class="line" :span="1">-</el-col>',
    '                                <el-col :span="9">',
    '                                    <el-input v-model.number="attributeDef[1]" placeholder="最大值"></el-input>',
    '                                </el-col>',
    '                                <el-col class="line" :span="3">',
    '                                    <el-button size="mini" type="danger" icon="el-icon-delete" circle  @click.prevent="removeAttributeDefLength(index)"></el-button>',
    '                                </el-col>',
    '                            </el-row>',
    '                        </el-form-item>',
    '                </el-form>',
    '                </el-card>',
    '                <!--属性互斥部分-->',
    '                <el-card shadow="always" >',
    '                    <div slot="header" class="clearfix">',
    '                        <span>属性互斥</span>',
    '                    </div>',
    '                    <el-checkbox-group  v-model="outIds" >',
    '                        <el-checkbox v-for="item  in attributeListCopy"',
    '                                     :label="item.attributeId"',
    '                                     :key="item.attributeId"',
    '                                     size="medium"',
    '                                     border >',
    '                            {{item.attributeName}}',
    '                        </el-checkbox>',
    '                    </el-checkbox-group>',
    '                </el-card>',
    '            </div>'
].join("");

Vue.component('zy-attribute-special', {
    template: htmlCodes,
    props: {
        isAdd: null, // 0新增 1 编辑
        id: null,//编辑时所需id
    },
    data() {
        return {
            special: {},//属性特规参数
            categoryList: [], //商品分类列表
            partsList: [],// 部件列表
            attributeList: [],// 属性列表
            attributeListCopy: [],// 属性列表备份 用作属性互斥
            outIds: [],// 属性-属性互斥
            specialRules: {
                categoryId: [{required: true, message: '请选择分类', trigger: 'change'}],
                partsId: [{required: true, message: '请选择部件', trigger: 'change'}],
                attributeId: [{required: true, message: '请选择属性', trigger: 'change'}],
            },
        }
    },
    mounted: function () {
        if (this.$props.isAdd === 0) {
            this.addAttributeSpecial();
        }
        if (this.$props.isAdd === 1) {
            this.handleEditAttributeSpecial(this.$props.id);
        }
    },

    methods: {
        // 添加属性特规
        addAttributeSpecial: function () {
            //获取增加属性所需初始数据
            var self = this;
            $.get(baseURL + "quoteProductAttributeOptionRelation/quoteproductattributeoptionrelation/addInfo", function (r) {
                if (r.code == 0) {
                    self.categoryList = r.categoryList;
                    self.special = r.quoteAttributeSpecial;
                    // 自定义属性特殊处理
                    self.$set(self.special, 'attributeDefinitionLength', []);
                    if (self.special.attributeIgnoreDefinition == 1) {
                        self.addAttributeDefLength();
                    }
                } else {
                    alert(r.msg());
                }
            });


        },

        //编辑属性特规
        handleEditAttributeSpecial: function (id) {
            // 获取详情
            var self = this;
            $.get(baseURL + "quoteProductAttributeOptionRelation/quoteproductattributeoptionrelation/attributeSpecialInfo/" + id, function (r) {
                if (r.code == 0) {
                    self.pecialRules = {};//置空 主要信息表单规则
                    self.special = r.quoteAttributeSpecial;
                    // 自定义属性特殊处理
                    if (self.special.attributeDefinitionLength) {
                        vm.$set(self.special, 'attributeDefinitionLength',
                            JSON.parse(self.special.attributeDefinitionLength));
                    } else {
                        self.$set(self.special, 'attributeDefinitionLength', []);
                    }
                    // 属性 互斥处理
                    // 最新备份数据
                    self.attributeListCopy = r.attributeList;
                    // 移除 attributeListCopy 当前值
                    var index = self.attributeListCopy.findIndex(function (data) {
                        return data.attributeId === self.special.attributeId;
                    });
                    if (index !== -1) {
                        self.attributeListCopy.splice(index, 1)
                    }
                    if (self.special.attributeAttributeOutIds) {
                        var tempArr = JSON.parse(self.special.attributeAttributeOutIds);
                        // 循环 赋值当前选中
                        for (var index in tempArr) {
                            if (tempArr[index][0] === self.special.attributeId) {
                                self.outIds.push(tempArr[index][1]);
                            }
                            if (tempArr[index][1] === self.special.attributeId) {
                                self.outIds.push(tempArr[index][0]);
                            }
                        }
                    }

                } else {
                    alert(r.msg);
                }
            });

        },

        //属性特规 分类变化
        attributeCategoryChange: function (value) {
            // 查询该分类是否有部件
            var self = this;
            $.get(baseURL + "quoteProduct/quoteproductbaseinfo/getParts?categoryId=" + value, function (r) {
                if (r.code == 0) {
                    if (r.partsList.length > 0) {
                        self.partsList = r.partsList;
                        self.special.partsId = null;
                        //置空属性列表
                        self.attributeList = [];
                        self.attributeListCopy = [];
                        self.special.attributeId = null;

                    } else {
                        // 直接查询该分类下的属性
                        $.get(baseURL + "quoteProductAttributeOptionRelation/quoteproductattributeoptionrelation/getAttributes?" +
                            "categoryId=" + self.special.categoryId, function (r) {
                            if (r.code == 0) {
                                self.attributeList = r.attributeList;
                                self.special.attributeId = null;
                                // 克隆一份 备份数据 用作属性互斥
                                self.attributeListCopy = $.extend(true, [], r.attributeList);
                                //置空部件列表
                                self.partsList = [];
                                self.special.partsId = null;

                            } else {
                                alert(r.msg);
                            }
                        });
                    }
                } else {
                    alert(r.msg);
                }
            });
        },

        //属性特规 部件变化
        attributePartsChange: function (value) {
            var self = this;
            // 查询该部件下属性
            $.get(baseURL + "quoteProductAttributeOptionRelation/quoteproductattributeoptionrelation/getAttributes?" +
                "partsId=" + value + "&categoryId=" + self.special.categoryId, function (r) {
                if (r.code == 0) {
                    self.attributeList = r.attributeList;
                    self.special.attributeId = null;
                    // 克隆一份 备份数据 用作属性互斥
                    self.attributeListCopy = $.extend(true, [], r.attributeList);
                } else {
                    alert(r.msg);
                }
            });
        },

        //属性特规 属性变化
        attributeChange: function (value) {
            // 清除已经选择的值
            this.outIds = [];
            // 克隆一份 最新备份数据
            this.attributeListCopy = $.extend(true, [], this.attributeList);
            // 移除 attributeListCopy 当前值
            var index = this.attributeListCopy.findIndex(function (data) {
                return data.attributeId === value;
            });
            if (index !== -1) {
                this.attributeListCopy.splice(index, 1)
            }
        },

        //新增自定义参数
        addAttributeDefLength: function () {
            this.special.attributeDefinitionLength.push([]);
        },

        //移除自定义参数
        removeAttributeDefLength: function (index) {
            this.special.attributeDefinitionLength.splice(index, 1)
        },

        // 自定义校验
        validateAttributeDefLength: function (rule, value, callback) {
            if (rule.data.length == 0) {
                callback(new Error('自定义参数不能为空!'));
            } else if (rule.data.length == 1) {
                callback(new Error('最小值与最大值不能为空!'));
            } else if (isNaN(rule.data[0])) {
                callback(new Error('最小值必须为数值!'));
            } else if (isNaN(rule.data[1])) {
                callback(new Error('最大值必须为数值!'));
            } else {
                callback();
            }
        },

        //保存 属性特规
        saveAttributeSpecial: function () {
            /* 规则校验
               1.分类ID 不能为空(表单直接校验)
               2.属性ID 不能为空(表单直接校验)
               3.若选择了自定义 则必须设置自定义参数 且2个值仅为数字不能为空(手动校验)
            */
            var flag = true;
            this.$refs['attributeSpecialForm'].validate((valid) => {
                if (!valid) {
                    flag = false;
                    return false;
                }
            });
            this.$refs['attributeSpecialDefineForm'].validate((valid) => {
                if (!valid) {
                    flag = false;
                    return false;
                }
            });
            if (!flag) {
                return;
            }

            if (this.special.attributeIgnoreDefinition == 1) {
                if (this.special.attributeDefinitionLength.length >= 0) {
                    // 循环校验 非空且为Number;
                    for (var index in this.special.attributeDefinitionLength.length) {
                        var temp = this.special.attributeDefinitionLength[index];
                        if (temp.length == 0) { //2个参数为空 直接移除
                            this.special.attributeDefinitionLength.splice(index, 1);
                        }
                    }
                }
                if (this.special.attributeDefinitionLength.length == 0) {
                    this.$message.error('选择自定时 必须填写自定义参数!');
                    return;
                }
            }
            if (this.special.attributeIgnoreDefinition == 0) {
                this.special.attributeDefinitionLength.splice(0);
            }
            //将互斥属性转换为 数组 存入special
            if (this.outIds.length > 0) {
                // 当前属性ID
                var attributeId = this.special.attributeId;
                var outIds = [];
                for (var index in this.outIds) {
                    var temp = this.outIds[index];
                    var tempArr = [];
                    if (temp < attributeId) { //将小Id的属性 放第一次列
                        tempArr[0] = temp;
                        tempArr[1] = attributeId;
                    } else {
                        tempArr[0] = attributeId;
                        tempArr[1] = temp;
                    }
                    outIds.push(tempArr);
                }
                // 存入对象
                this.special.attributeAttributeOutIds = outIds;
            }else {
                this.special.attributeAttributeOutIds = null;
            }

            //克隆对象 提交
            var postData = $.extend(true, {}, this.special);
            if (postData.attributeAttributeOutIds && postData.attributeAttributeOutIds.length > 0) {
                postData.attributeAttributeOutIds = JSON.stringify(postData.attributeAttributeOutIds);
            } else {
                postData.attributeAttributeOutIds = JSON.stringify([]);
            }
            if (postData.attributeDefinitionLength && postData.attributeDefinitionLength.length > 0) {
                postData.attributeDefinitionLength = JSON.stringify(postData.attributeDefinitionLength);
            } else {
                postData.attributeDefinitionLength = JSON.stringify([]);
            }
            // 异步提交即可;
            var self = this;
            this.$confirm('确定要保存吗, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = self.$loading({
                    lock: true,
                    text: '保存中,请勿刷新页面',
                    spinner: 'el-icon-loading'
                });
                $.ajax({
                    type: "POST",
                    url: baseURL + "quoteProductAttributeOptionRelation/quoteproductattributeoptionrelation/saveOrUpdateAttributeSpecial",
                    contentType: "application/json",
                    data: JSON.stringify(postData),
                    success: function (r) {
                        loading.close();
                        if (r.code == 0) {
                            alert(r.msg, function (index) {
                                self.goBackAttributeSpecialList();
                            });
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            }).catch(() => {
                //loading.close();
            });

        },

        goBackAttributeSpecialList: function () {
            //情况编辑部分数据
            this.special = {};
            this.categoryList = [],//商品分类列表
            this.partsList = [],//部件列表
            this.attributeList = [],//属性列表
            this.attributeListCopy = [],//属性列表备份 用作属性互斥
            this.outIds = [],// 属性-属性互斥

            this.$refs['attributeSpecialDefineForm'].resetFields();
            this.$refs['attributeSpecialForm'].resetFields();

            //抛出返回事件
            this.$emit('go-back-attribute', null);

        },

    },
});
